<form action="post" #elform="ngForm">
	{{data | json}}<br/>
	<label for="name">name</label>
	<input type="text" id="name" #elname name="name" required>
	{{elname.value}}
	<label for="age">age</label>
	<input type="text" id="age" #elage name="age">
	<select #elsex name="sexs" multiple [(ngModel)]="data.sexs">
		<option *ngFor="let s of sexs" [value]="s.id">{{s.title}}</option>
	</select>
	<button type="submit" (click)="submit(elname.value,elage.value,elsex.value,elform)">提交</button>
</form>
<br/>
<form #elform2="ngForm" (ngSubmit)="onSubmit(elform2)" class="formtip">

	<label for="name">name</label>
	<input type="text" id="name1" [(ngModel)]="data.name" #elname1="ngModel" name="name" required minlength="2">
	<p *ngIf="elname1.touched && elname1.invalid && elname1.errors">
		<b [hidden]="!elname1.errors.required">用户名不能为空</b>
		<b [hidden]="!elname1.errors.minlength">最少2个字符</b>
	</p><br/>

	<label for="age">age</label>
	<input type="text" id="age1" [(ngModel)]="data.age" #elage1="ngModel" name="age" 
	required  ><br/>

	<select  name="sex"  [(ngModel)]="data.sex" #elsex1="ngModel" required>
		<option *ngFor="let s of sexs" value="{{s.id}}">{{s.title}}</option>
	</select>
	

	<input type="radio" name="num" [(ngModel)]="data.num" value="1">1
	<input type="radio" name="num" [(ngModel)]="data.num" value="2">2
	

	


	<button type="submit" [disabled]="elform2.form.invalid" >提交</button><br/>
	是否有效{{elname1.valid  }}是否修改{{elname1.touched}} errors={{elname1?.errors | json}}
	是否原始的{{elname1.pristine}}<br/>
	class={{elname1.className}}<br/>
	{{elform2.form.value | json}}
</form>

<br/> 
ngModelGroup
<form class="formtip" #elform3="ngForm">
	
	<fieldset ngModelGroup="namegroup" #elnamegroup="ngModelGroup" [hidden]="curnum!=1">
		<label for="name">name</label>
		<input type="text" id="name1" [(ngModel)]="data.name" #elname3="ngModel" name="name" required minlength="2">
		<label for="age">age</label>
		<input type="text" id="age1" [(ngModel)]="data.age"  #elage3="ngModel" name="age" 
		required  ><br/>

		<p *ngIf="elname3.touched && elname3.invalid && elname3.errors">
			<b [hidden]="!elname3.errors.required">用户名不能为空</b>
			<b [hidden]="!elname3.errors.minlength">最少2个字符</b>
		</p>
		<p *ngIf="elage3.touched && elage3.invalid && elage3.errors">
			<b [hidden]="!elage3.errors.required">年龄不能为空</b>
		</p>

		<button type="submit" [disabled]="elnamegroup.invalid"  (click)="next(2)">下一步</button><br/>
	</fieldset>
	<fieldset ngModelGroup="sexgroup" #elsexgroup="ngModelGroup"  [hidden]="curnum!=2">
		<select  name="sex"  [(ngModel)]="data.sex"  required>
			<option *ngFor="let s of sexs" value="{{s.id}}">{{s.title}}</option>
		</select>

		<input type="radio" name="num" [(ngModel)]="data.num" value="1">1
		<input type="radio" name="num" [(ngModel)]="data.num" value="2">2
		<button type="submit"  (click)="submit3(elform3,elnamegroup,elsexgroup)">提交</button><br/>
	</fieldset>	
</form>
FormGroup
<form [formGroup]="userForm" class="formtip" #form4="ngForm">
		<label for="name4">name</label>
		<input type="text" id="name4"  name="name4"  formControlName="name4">
		<p *ngIf="userForm.get('name4').touched && userForm.get('name4').invalid && userForm.get('name4').errors">
			<b [hidden]="!userForm.get('name4').errors.required">用户名不能为空</b>
			<b [hidden]="!userForm.get('name4').errors.minlength">最少2个字符</b>
			<b [hidden]="!userForm.get('name4').errors.email">{{userForm.get('name4').errors.email.msg}}</b>
		</p><br/>

		<label for="age">age</label>
		<input type="text" id="age1" name="age4" formControlName="age4">
		<p *ngIf="userForm.get('age4').touched && userForm.get('age4').invalid && userForm.get('age4').errors">
			<b [hidden]="!userForm.get('age4').errors.required">年龄不能为空</b>
		</p>
		<div formArrayName="users">
			<div *ngFor="let user of userForm.get('users').controls; let a=index">
				
				<input type="text"  [formControlName]="a"> 
				
			</div>
		</div>
		

		<button type="submit" (click)="submit4(form4)" >提交</button>
		<button type="submit" (click)="userForm.reset()">reset</button>
</form>


